<template>
  <section class="view-box">
    <el-tabs v-model="tabName" @tab-click="handleClick">
      <el-tab-pane label="图形端口" name="port">
        <div class="flowImg-box">
          <h1 class="head headlist">
            <i class="el-icon-picture-outline"></i>&nbsp;&nbsp;
            <span class="font-black">流量图列表</span>

            <span class="fr" style="margin-right: 15px;">
              <el-button
                @click.stop="listType='list'"
                class="el-icon-menu"
                size="mini"
                :type="listType=='list' ? 'primary' : 'text'"
              ></el-button>
              <el-button
                @click.stop="listType='img'"
                class="el-icon-s-data"
                size="mini"
                :type="listType=='img' ? 'primary' : 'text'"
              ></el-button>
            </span>
          </h1>
          <div class="viewbox-body">
            <v-graph_tool @change="changGraphFilter"></v-graph_tool>
            <table class="table table-list">
              <colgroup>
                <col />
                <col width="70px" />
              </colgroup>
              <tbody>
                <tr v-for="(item ,index) in chooseParseList" :key="index">
                  <td>
                    <div style="cursor:pointer" slot="reference" class="font-black f12">
                      <el-tag
                        type="primary"
                        size="mini"
                        v-if="item['port_id'].indexOf(',') > 0"
                        effect="dark"
                      >合</el-tag>
                      &nbsp;{{item.title}}
                      <span
                        class="el-icon-edit imgedit"
                        @click.stop="editImg(item,index)"
                      ></span>
                      <div class="dis5"></div>

                      <template v-if="listType == 'img'">
                        <v-graph
                          :ref="'graph' + index"
                          :api="item.api"
                          :params="item.params"
                          @sendimg="sendimg"
                          @imgs="imgs"
                          @echarts="showEcharts"
                          @portDateInfo="portDate"
                        ></v-graph>
                        <div class="dis5"></div>
                        <div class="tc">
                          <div
                            @click.stop="changeGraphNode(index, n)"
                            v-for="(n, i) in item.node_ids"
                            :key="i"
                            class="node-tag"
                          >
                            <span class="font-gray2">节点</span>
                            <span
                              :class="n.node_id==item.params.node_id ? 'fb font-blue': ''"
                            >{{ n.node_id }}</span>
                          </div>
                        </div>
                      </template>
                      <template v-else>
                        <div v-for="(n, i) in item.node_ids" :key="i" class="node-tag">
                          <el-popover
                            placement="right"
                            width="530"
                            trigger="click"
                            position="left-start"
                            @show="showimg(n)"
                          >
                            <img :src="imgsrc" alt="流量图" v-if="imgsrc" />
                            <span v-else class="font-gray2 f12">处理中, 请稍后...</span>
                            <span slot="reference">
                              <span class="font-gray2">N</span>
                              {{ n.node_id }}
                            </span>
                          </el-popover>
                        </div>
                      </template>
                    </div>
                  </td>
                  <td></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="基础信息" name="base">
        <div class="base-info-box">
          <h1 class="head">
            <i class="el-icon-tickets"></i>&nbsp;&nbsp;
            <span class="font-black">基础信息</span>
          </h1>
          <div class="viewbox-body">
            <el-form
              label-position="right"
              label-width="100px"
              size="mini"
              style="margin-top: 20px;"
            >
              <el-form-item label="状态:">
                <span
                  :class="form.status == 1 ? 'font-green' : 'font-red'"
                >{{flowConfig[form.status]}}</span>
              </el-form-item>
              <el-form-item label="名称:">
                <span>{{form.name}}</span>
              </el-form-item>
              <el-form-item label="客户:">
                <span>{{form.client_name}}</span>
              </el-form-item>
              <el-form-item label="创建人:">
                <span>{{form.creator_uname}}</span>
              </el-form-item>
              <el-form-item label="创建时间:">
                <span>{{form.dateline | dateFormat('yyyy-MM-dd HH:mm')}}</span>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="审核日志" name="shlog">
        <div class="base-info-box">
          <h1 class="head">
            <i class="el-icon-document-checked"></i>&nbsp;&nbsp;
            <span class="font-black">审核记录</span>
          </h1>
          <div class="viewbox-body" style="margin-top:10px;">
            <table class="table table-list">
              <colgroup>
                <col width="150px" />
                <col width="100px" />
                <col width="150px" />
                <col />
              </colgroup>
              <thead>
                <th>审核状态</th>
                <th>审核人</th>
                <th>审核时间</th>
                <th>审核备注</th>
              </thead>
              <tbody>
                <tr v-for="(item ,index) in logList" :key="index">
                  <td :class="sh_statusColor[item.sh_status]" style="font-size:14px;">
                    <span>{{statusConfig[item.sh_status]}}</span>&nbsp;
                    <span
                      style="font-size:12px;"
                      v-if="item.sh_status!=9"
                      class="font-gray"
                    >[{{typeConfig[item.type]}}]</span>
                  </td>
                  <td style="font-size:14px;">{{item.sh_uname || '-'}}</td>
                  <td style="font-size:14px;">{{item.sh_dateline | dateFormat('yyyy-MM-dd HH:mm')}}</td>
                  <td style="font-size:14px;">{{item.sh_more || '-'}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>
import cache from "@cache";
export default {
  props: ["data"],
  data() {
    return {
      form: {},
      imgsrc: "",
      listType: "img",
      imgParams: {},
      chooseParseList: [],
      chooseList: [],
      statusConfig: {},
      typeConfig: {},
      expands: [],
      cal: "id",
      loadingImg: false,
      tabName: "port",
      logList: [],
      flowConfig: {},
      sh_statusColor: {
        "0": "font-red",
        "1": "font-red",
        "2": "font-gray",
        "3": "font-red",
        "9": "font-green"
      }
    };
  },
  watch: {
    data: {
      handler(val) {
        if (val) {
          this.$api.get("flow_img.get_detail", { id: val }).then(res => {
            if (res.status === 1) {
              this.form = res.data.img;
              this.chooseList = res.data.items;
              this.parseChoose();
            }
          });
          this.$api.get("flow_img.get_sh_log", { id: val }).then(res => {
            if (res.status === 1) {
              this.logList = res.data.list;
            }
          });
        }
      },
      immediate: true
    }
  },
  methods: {
    portDate(val) {
      this.$emit("portDateInfo", val);
    },
    imgs(val) {
      //接收展现所有单端口流量图数据
      this.$emit("imgs", val);
    },
    showEcharts(val, valbase) {
      this.$emit("echarts", val, valbase);
    },
    fetchData() {
      this.$api.get("flow_img.get_detail", { id: this.data }).then(res => {
        if (res.status === 1) {
          this.chooseList = res.data.items;
          this.parseChoose();
        }
      });
    },
    editImg(item, index) {
      this.$emit("editImg", item, this.chooseList[index].sort);
    },
    sendimg(val) {
      this.$emit("sendimg", val);
    },
    changGraphFilter(filter) {
      let that = this;
      that.imgParams = filter;
      that.chooseParseList.forEach((item, index) => {
        for (let i in filter) {
          item.params[i] = filter[i];
        }
        that.$refs["graph" + index][0].fetchImg();
      });
    },
    changeGraphNode(index, item) {
      let that = this;
      that.chooseParseList[index].params["node_id"] = item["node_id"];
      that.chooseParseList[index].params["port_id"] = item["port_id"];
      that.$refs["graph" + index][0].fetchImg();
    },
    parseChoose() {
      let tmp = {};
      this.chooseList.forEach(item => {
        if (!tmp[item.md5]) {
          let type = item.port_id.indexOf(",") > 0 ? 1 : 0;
          tmp[item.md5] = {
            title: item.title,
            node_ids: [
              {
                node_id: item.node_id,
                port_id: item.port_id,
                title: item.graph_title || item.title
              }
            ],
            img_id: item.img_id,
            md5: item.md5,
            node_id: item.node_id,
            port_id: item.port_id,
            params: {
              node_id: item.node_id,
              port_id: item.port_id,
              type: type,
              graph_title: item.graph_title || item.title,
              bit_multi: 1,
              base:1000,
              nan_95th:1
            },
            api: type ? "cacti.get_merge_port_image" : "cacti.get_port_image"
          };
        } else {
          tmp[item.md5].node_ids.push({
            node_id: item.node_id,
            port_id: item.port_id,
            title: item.title,
            bit_multi: 1,
            base:1000,
            nan_95th:1
          });
        }
      });
      this.chooseParseList = [];
      for (let i in tmp) {
        this.chooseParseList.push(tmp[i]);
        //this.$set(this.chooseParseList, i, tmp[i])
      }
    },
    showimg(item) {
      var para = Object.assign(
        {
          port_id: item.port_id || item.did,
          node_id: item.node_id || this.nodeId,
          graph_width: 400,
          graph_height: 80,
          graph_title: item.title || item.name_cache
        },
        this.imgParams
      );
      this.imgsrc = "";
      if (para["port_id"].indexOf(",") > 0) {
        this.$api.post("cacti.get_merge_port_image", para).then(res => {
          if (res.status === 1) {
            this.imgsrc = res.data;
          }
        });
      } else {
        this.$api.post("cacti.get_port_image", para).then(res => {
          if (res.status === 1) {
            this.imgsrc = res.data;
          }
        });
      }
    },
    handleClick(val) {
      this.tabName = val.name;
    },
    clickRow(row, event, column) {
      Array.prototype.remove = function(val) {
        let index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (this.expands.indexOf(row[this.cal]) < 0) {
        this.expands.push(row[this.cal]);
      } else {
        this.expands.remove(row[this.cal]);
      }
    }
  },
  mounted() {
    this.statusConfig = cache.get("erpConfig")["sh_status"];
    this.typeConfig = cache.get("erpConfig")["sh_type"];
    this.flowConfig = cache.get("erpConfig")["flow_img_status"];
  }
};
</script>

<style lang="scss" scoped>
.view-box1 {
}
.headlist {
  position: relative;
}
.allImg {
  position: absolute;
  top: 10px;
  right: 10px;
}

.base-info-box {
}
.base-info-box h1,
.flowImg-box h1 {
  height: 48px;
  line-height: 48px;
  font-size: 18px;
  font-weight: 400;
  color: #1598db;
  padding-left: 20px;
  background-color: #f8f8f8;
}
.base-info-box .viewbox-body,
.flowImg-box .viewbox-body {
  //   padding: 10px 20px;
}
.loading {
  width: 500px;
  height: 220px;
  line-height: 220px;
  font-size: 25px;
  text-align: center;
}
.flowImg-box /deep/ td.el-table__expanded-cell {
  padding-right: 0px !important;
}
.imgedit {
  margin-left: 10px;
  padding: 4px 6px;
  border: 1px solid #dcdfe6;
}
.imgedit:hover {
  cursor: pointer;
  border: 1px solid #c6e2ff;
  color: #409eff;
  background: #ecf5ff;
}
</style>



